<template>
  <el-dialog v-model="dialogVisible" :title="spot.name" width="80%" class="hotspot-detail-dialog" top="5vh"
    destroy-on-close>
    <div class="detail-container">
      <!-- 基本信息区域 -->
      <div class="basic-info">
        <el-row :gutter="20">
          <el-col :span="8">
            <div class="spot-image-container">
              <el-image :src="spot.image" fit="cover" class="spot-image" />
              <div class="hotness-score">
                <el-progress type="dashboard" :percentage="spot.hotnessScore" :color="hotScoreColors"
                  :stroke-width="12">
                  <template #default="{ percentage }">
                    <div class="progress-content">
                      <span class="progress-value">{{ percentage }}</span>
                      <span class="progress-label">热度</span>
                    </div>
                  </template>
                </el-progress>
              </div>
            </div>
          </el-col>
          <el-col :span="16">
            <div class="spot-info">
              <h2>{{ spot.name }}</h2>
              <p class="description">{{ spot.description }}</p>
              <div class="info-grid">
                <div class="info-item">
                  <el-icon>
                    <Location />
                  </el-icon>
                  <span>地址：{{ spot.address }}</span>
                </div>
                <div class="info-item">
                  <el-icon>
                    <Clock />
                  </el-icon>
                  <span>开放时间：{{ spot.openingHours }}</span>
                </div>
                <div class="info-item">
                  <el-icon>
                    <Ticket />
                  </el-icon>
                  <span>票价：{{ spot.ticketPrice }}</span>
                </div>
                <div class="info-item">
                  <el-icon>
                    <Calendar />
                  </el-icon>
                  <span>最佳游览时间：{{ spot.bestVisitTime }}</span>
                </div>
              </div>
            </div>
          </el-col>
        </el-row>
      </div>

      <!-- 数据分析区域 -->
      <div class="analytics-section" v-if="hasAnalyticsData">
        <el-divider content-position="center">数据分析</el-divider>

        <!-- 第一排图表 -->
        <el-row :gutter="20">
          <!-- 情感分析 -->
          <el-col :span="8">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>游客情感分析</span>
                  <el-tooltip content="基于社交媒体评论的情感分析">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </template>
              <div class="chart-container" ref="sentimentPieChart"></div>
            </el-card>
          </el-col>

          <!-- 关键词云 -->
          <el-col :span="8">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>热门关键词</span>
                  <el-tooltip content="游客评论中提及最多的关键词">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </template>
              <div class="chart-container" ref="keywordCloudChart"></div>
              <div class="keywords-list">
                <el-tag 
                  v-for="(keyword, idx) in getMoreKeywords()" 
                  :key="idx" 
                  :type="getTagType(idx)"
                  class="keyword-tag"
                  effect="light">
                  {{ keyword.text }} ({{ keyword.weight.toFixed(1) }})
                </el-tag>
              </div>
            </el-card>
          </el-col>

          <!-- 用户关注点 -->
          <el-col :span="8">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>用户关注热点</span>
                  <el-tooltip content="游客重点关注的景点要素及热度">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </template>
              <div class="focus-points-direct" v-if="hasDetailedFocusPoints">
                <div v-for="(point, idx) in getDetailedFocusPoints()" :key="idx" class="focus-point-item">
                  <div class="focus-point-header">
                    <div class="focus-category-badge" :class="getCategoryColorClass(idx)">
                      {{ point.category }}
                    </div>
                    <div class="focus-item-name">{{ point.item }}</div>
                    <div class="focus-item-score">
                      <el-progress 
                        :percentage="getFocusScorePercentage(point.score)" 
                        :color="getFocusScoreColor(point.score)"
                        :format="() => (point.score / 100).toFixed(1)"
                        :stroke-width="10"
                        class="focus-score-progress" />
                    </div>
                  </div>
                  <div class="focus-entities">
                    <el-tag 
                      v-for="(entity, eidx) in point.top_entities" 
                      :key="eidx" 
                      size="small"
                      effect="plain"
                      :type="getEntityTagType(eidx)">
                      {{ entity }}
                    </el-tag>
                  </div>
                </div>
              </div>
              <div v-else class="focus-alternative">
                <div v-for="(point, idx) in spot.analytics.userFocusPoints" :key="idx" class="focus-alt-item">
                  <div class="focus-alt-name">{{ point.name }}</div>
                  <el-progress :percentage="point.value" :color="getFocusScoreColor(point.value * 20)" />
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 第二排内容 -->
        <el-row :gutter="20" class="mt-20">
          <!-- 热门话题 -->
          <el-col :span="8">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>热门话题</span>
                  <el-tooltip content="游客讨论最多的话题">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </template>
              <div class="topics-container">
                <div v-for="(topic, index) in getTopTopics()" :key="index" class="topic-item">
                  <div class="topic-name">
                    <el-tag size="medium" effect="dark" :type="getTopicTagType(index)">{{ topic.name }}</el-tag>
                  </div>
                  <div class="topic-keywords">
                    <el-tag v-for="(keyword, kidx) in topic.keywords.slice(0, 5)" :key="kidx" size="small" class="topic-keyword">
                      {{ keyword.word }}
                      <span class="keyword-weight">({{ (keyword.weight * 100).toFixed(1) }})</span>
                    </el-tag>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>

          <!-- 游客趋势 -->
          <el-col :span="8">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>全年游客趋势</span>
                  <el-tooltip content="各月游客数量估计">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </template>
              <div class="chart-container" ref="visitorTrendsChart"></div>
            </el-card>
          </el-col>

          <!-- 旅行小贴士 -->
          <el-col :span="8">
            <el-card class="chart-card">
              <template #header>
                <div class="card-header">
                  <span>旅行小贴士</span>
                  <el-tooltip content="高分旅行者推荐">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </template>
              <div class="tips-tabs-container">
                <el-tabs tab-position="left" style="height: 100%;" v-if="hasDetailedTravelTips">
                  <el-tab-pane v-for="(tips, category) in getDetailedTravelTips()" :key="category" :label="translateCategory(category)">
                    <div class="tips-list">
                      <div v-for="(tip, index) in tips" :key="index" class="tip-item-detailed">
                        <div class="tip-content">
                          <el-icon class="tip-icon"><Check /></el-icon>
                          <span>{{ tip.tip }}</span>
                        </div>
                        <div class="tip-score">推荐度: {{ tip.score.toFixed(1) }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
                <div class="tips-container" v-else>
                  <div v-for="(tip, index) in spot.analytics.travelTips" :key="index" class="tip-item">
                    <el-icon class="tip-icon">
                      <Check />
                    </el-icon>
                    <span>{{ tip }}</span>
                  </div>
                </div>
              </div>
            </el-card>
          </el-col>
        </el-row>
        
        <!-- 第三排 - 用户评论 -->
        <el-row :gutter="20" class="mt-20">
          <el-col :span="24">
            <el-card class="comments-card">
              <template #header>
                <div class="card-header">
                  <span>精选评论</span>
                  <el-tooltip content="社交媒体精选评论">
                    <el-icon><QuestionFilled /></el-icon>
                  </el-tooltip>
                </div>
              </template>
              <div class="comments-container">
                <el-tabs>
                  <el-tab-pane label="正面评价">
                    <div class="comments-list">
                      <div v-for="(comment, idx) in getTopComments('positive', 3)" 
                           :key="idx" 
                           class="comment-item positive">
                        <div class="comment-content">
                          <el-icon class="comment-icon"><StarFilled /></el-icon>
                          {{ comment.content }}
                        </div>
                        <div class="comment-score">评分: {{ formatScore(comment.score) }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                  <el-tab-pane label="负面评价">
                    <div class="comments-list">
                      <div v-for="(comment, idx) in getTopComments('negative', 3)" 
                           :key="idx" 
                           class="comment-item negative">
                        <div class="comment-content">
                          <el-icon class="comment-icon"><WarningFilled /></el-icon>
                          {{ comment.content }}
                        </div>
                        <div class="comment-score">评分: {{ formatScore(comment.score) }}</div>
                      </div>
                    </div>
                  </el-tab-pane>
                </el-tabs>
              </div>
            </el-card>
          </el-col>
        </el-row>

        <!-- 底部操作区域 -->
        <div class="action-area">
          <el-button type="primary" @click="addSpotToPlan">添加到我的规划</el-button>
          <el-button @click="dialogVisible = false">关闭</el-button>
        </div>
      </div>
    </div>
  </el-dialog>
</template>

<script setup>
import { ref, computed, onMounted, watch } from 'vue'
import {
  Location, Clock, Ticket, Calendar, Check, StarFilled, 
  QuestionFilled, WarningFilled
} from '@element-plus/icons-vue'
import { ElMessage } from 'element-plus'
import * as echarts from 'echarts'
import 'echarts-wordcloud'

const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  spot: {
    type: Object,
    required: true
  }
})

const emit = defineEmits(['update:visible'])

const dialogVisible = computed({
  get: () => props.visible,
  set: (val) => emit('update:visible', val)
})

// 判断是否有分析数据
const hasAnalyticsData = computed(() => {
  return props.spot && props.spot.analytics;
})

// 检查是否有详细的旅行贴士分类数据
const hasDetailedTravelTips = computed(() => {
  return props.spot && props.spot.jsonData && props.spot.jsonData.travel_tips;
})

// 检查是否有详细的用户关注点数据
const hasDetailedFocusPoints = computed(() => {
  return props.spot && props.spot.jsonData && props.spot.jsonData.focus_points;
})

// 引用ECharts容器
const sentimentPieChart = ref(null)
const keywordCloudChart = ref(null)
const visitorTrendsChart = ref(null)

// 热度分数颜色
const hotScoreColors = [
  { color: '#f56c6c', percentage: 60 },
  { color: '#e6a23c', percentage: 75 },
  { color: '#1989fa', percentage: 90 },
  { color: '#67c23a', percentage: 100 },
]

// 获取额外关键词
const getMoreKeywords = () => {
  if (!props.spot?.analytics?.keywords) return [];
  
  // 合并来自不同来源的关键词（避免重复）
  const allKeywords = [...props.spot.analytics.keywords];
  // 如果有原始JSON数据，尝试获取更多关键词
  if (props.spot.jsonData && props.spot.jsonData.keywords) {
    const jsonKeywords = [
      ...(props.spot.jsonData.keywords.tfidf || []).map(k => ({text: k.word, weight: k.weight * 10})),
      ...(props.spot.jsonData.keywords.textrank || []).map(k => ({text: k.word, weight: k.weight * 10})),
    ];
    
    // 合并并去重
    const seenWords = new Set(allKeywords.map(k => k.text));
    for (const k of jsonKeywords) {
      if (!seenWords.has(k.text)) {
        seenWords.add(k.text);
        allKeywords.push(k);
      }
    }
  }
  
  return allKeywords.sort((a, b) => b.weight - a.weight);
}

// 获取标签颜色类型
const getTagType = (index) => {
  const types = ['', 'success', 'warning', 'info', 'danger'];
  return types[index % types.length];
}

// 获取实体标签颜色类型
const getEntityTagType = (index) => {
  const types = ['primary', 'success', 'warning', 'info', 'danger'];
  return types[index % types.length];
}

// 获取关注点百分比值（用于进度条）
const getFocusScorePercentage = (score) => {
  // 将分数范围映射到0-100之间的百分比
  return Math.min(100, Math.round(score / 20));
}

// 获取关注点分数颜色
const getFocusScoreColor = (score) => {
  if (score > 1000) return '#67c23a';
  if (score > 500) return '#409eff';
  if (score > 100) return '#e6a23c';
  return '#909399';
}

// 获取类别颜色类
const getCategoryColorClass = (index) => {
  const classes = ['category-primary', 'category-success', 'category-warning', 
                  'category-danger', 'category-info'];
  return classes[index % classes.length];
}

// 获取详细的用户关注点
const getDetailedFocusPoints = () => {
  if (!props.spot?.jsonData?.focus_points) return [];
  return props.spot.jsonData.focus_points;
}

// 获取详细旅行贴士（按类别）
const getDetailedTravelTips = () => {
  if (!props.spot?.jsonData?.travel_tips) return {};
  return props.spot.jsonData.travel_tips;
}

// 翻译贴士类别
const translateCategory = (category) => {
  const categoryMap = {
    '餐饮': '餐饮',
    '交通': '交通',
    '安全': '安全',
    '费用': '费用',
    '时间': '时间',
    'traffic': '交通',
    'timing': '时间',
    'cost': '费用',
    'dining': '餐饮',
    'safety': '安全'
  };
  return categoryMap[category] || category;
}

// 获取话题标签颜色类型
const getTopicTagType = (index) => {
  const types = ['primary', 'success', 'warning', 'info', 'danger'];
  return types[index % types.length];
}

// 在组件挂载后初始化图表
onMounted(() => {
  setTimeout(() => {
    initCharts()
  }, 300)
})

// 观察spot属性变化，重新初始化图表
watch(() => props.spot, () => {
  if (props.visible) {
    setTimeout(() => {
      initCharts()
    }, 300)
  }
}, { deep: true })

// 初始化所有图表
const initCharts = () => {
  if (!props.spot?.analytics) return
  
  setTimeout(() => {
    initSentimentChart()
    initKeywordChart()
    initVisitorTrendsChart()
    
    // 添加窗口大小变化监听
    const handleResize = () => {
      if (sentimentPieChart.value) echarts.getInstanceByDom(sentimentPieChart.value)?.resize()
      if (keywordCloudChart.value) echarts.getInstanceByDom(keywordCloudChart.value)?.resize()
      if (visitorTrendsChart.value) echarts.getInstanceByDom(visitorTrendsChart.value)?.resize()
    }
    
    window.addEventListener('resize', handleResize)
    
    // 监听容器滚动事件，确保图表在滚动时正确渲染
    const container = document.querySelector('.detail-container')
    if (container) {
      container.addEventListener('scroll', () => {
        clearTimeout(window.scrollTimer)
        window.scrollTimer = setTimeout(handleResize, 100)
      })
    }
    
    return () => {
      window.removeEventListener('resize', handleResize)
    }
  }, 300)
}

// 初始化情感分析饼图
const initSentimentChart = () => {
  if (!sentimentPieChart.value) return

  const chart = echarts.init(sentimentPieChart.value)
  const { positive, neutral, negative } = props.spot.analytics.sentimentData

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c}%'
    },
    legend: {
      orient: 'horizontal',
      bottom: 5,
      itemGap: 20,
      data: ['正面', '中性', '负面'],
      itemWidth: 14,
      itemHeight: 14,
      textStyle: {
        fontSize: 12
      }
    },
    color: ['#67c23a', '#909399', '#f56c6c'],
    series: [
      {
        name: '情感分析',
        type: 'pie',
        radius: ['45%', '65%'],
        center: ['50%', '40%'],
        avoidLabelOverlap: false,
        label: {
          show: true,
          position: 'outside',
          formatter: '{b}: {c}%',
          fontSize: 12
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 14,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: true,
          length: 10,
          length2: 10
        },
        data: [
          { value: positive, name: '正面' },
          { value: neutral, name: '中性' },
          { value: negative, name: '负面' }
        ]
      }
    ]
  }

  chart.setOption(option)
  window.addEventListener('resize', () => chart.resize())
}

// 初始化关键词云
const initKeywordChart = () => {
  if (!keywordCloudChart.value) return

  const chart = echarts.init(keywordCloudChart.value)
  const keywords = getMoreKeywords().slice(0, 20); // 最多展示20个关键词

  const option = {
    tooltip: {
      show: true,
      formatter: function(params) {
        return `${params.name}: ${(params.value/10).toFixed(1)}`;
      }
    },
    series: [{
      type: 'wordCloud',
      shape: 'circle',
      left: 'center',
      top: '10%',
      width: '100%',
      height: '85%',
      right: null,
      bottom: null,
      sizeRange: [12, 40],
      rotationRange: [-45, 45],
      rotationStep: 15,
      gridSize: 8,
      drawOutOfBound: false,
      textStyle: {
        fontFamily: 'sans-serif',
        fontWeight: 'bold',
        color: function () {
          return 'rgb(' + [
            Math.round(Math.random() * 120) + 80,
            Math.round(Math.random() * 120) + 80,
            Math.round(Math.random() * 120) + 80
          ].join(',') + ')'
        }
      },
      emphasis: {
        shadowBlur: 10,
        shadowColor: '#333'
      },
      data: keywords.map(item => ({
        name: item.text,
        value: item.weight * 10
      }))
    }]
  }

  chart.setOption(option)
  window.addEventListener('resize', () => chart.resize())
}

// 初始化游客趋势折线图
const initVisitorTrendsChart = () => {
  if (!visitorTrendsChart.value) return

  const chart = echarts.init(visitorTrendsChart.value)
  const trends = props.spot.analytics.visitorTrends

  const option = {
    tooltip: {
      trigger: 'axis',
      formatter: function(params) {
        return params[0].name + ': ' + params[0].value + '人';
      }
    },
    grid: {
      left: '5%',
      right: '5%',
      bottom: '10%',
      top: '5%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      boundaryGap: false,
      data: trends.map(item => item.month),
      axisLabel: {
        interval: 1,
        rotate: 0
      }
    },
    yAxis: {
      type: 'value',
      splitNumber: 4,
      axisLabel: {
        formatter: value => {
          if (value >= 10000) {
            return (value / 10000) + '万';
          }
          return value;
        }
      }
    },
    series: [
      {
        name: '游客数量',
        type: 'line',
        stack: '总量',
        smooth: true,
        data: trends.map(item => item.count),
        areaStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            {
              offset: 0,
              color: 'rgba(128, 178, 233, 0.7)'
            },
            {
              offset: 1,
              color: 'rgba(128, 178, 233, 0.1)'
            }
          ])
        },
        lineStyle: {
          color: '#409eff',
          width: 3
        },
        itemStyle: {
          color: '#409eff'
        },
        symbol: 'circle',
        symbolSize: 6
      }
    ]
  }

  chart.setOption(option)
  window.addEventListener('resize', () => chart.resize())
}

// 获取热门话题
const getTopTopics = () => {
  if (!props.spot?.analytics?.topics) return [];
  return props.spot.analytics.topics.slice(0, 3);
}

// 获取精选评论
const getTopComments = (type, count) => {
  if (!props.spot?.analytics?.comments) return [];
  
  const comments = props.spot.analytics.comments[type] || [];
  return comments.slice(0, count);
}

// 格式化评分
const formatScore = (score) => {
  // 区间转换，使负面评分在0-5之间，正面评分在6-10之间
  if (score < 0) {
    // 负面评分(-1到0)转换为(1到5)
    return (5 + score * 5).toFixed(1);
  } else {
    // 正面评分(0到1)转换为(5到10)
    return (5 + score * 5).toFixed(1);
  }
}

// 添加景点到规划
const addSpotToPlan = () => {
  // 这里可以调用父组件方法添加景点到规划
  ElMessage.success(`已添加${props.spot.name}到规划`)
  dialogVisible.value = false
}
</script>

<style scoped>
.detail-container {
  padding: 15px;
  max-height: calc(85vh - 60px);
  overflow-y: auto;
  overflow-x: hidden;
  height: 100%;
  scroll-behavior: smooth;
  color: #303133;
}

.detail-container::-webkit-scrollbar {
  width: 8px;
}

.detail-container::-webkit-scrollbar-track {
  background-color: #f0f0f0;
  border-radius: 4px;
}

.detail-container::-webkit-scrollbar-thumb {
  background-color: #c0c0c0;
  border-radius: 4px;
}

.detail-container::-webkit-scrollbar-thumb:hover {
  background-color: #a0a0a0;
}

.spot-image-container {
  position: relative;
  height: 220px;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.spot-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.hotness-score {
  position: absolute;
  bottom: 10px;
  right: 10px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  padding: 5px;
  width: 100px;
  height: 100px;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
}

.progress-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.progress-value {
  font-size: 20px;
  font-weight: bold;
  color: #303133;
}

.progress-label {
  font-size: 12px;
  color: #909399;
}

.spot-info {
  height: 100%;
  display: flex;
  flex-direction: column;
}

.spot-info h2 {
  margin-top: 0;
  margin-bottom: 16px;
  color: #303133;
  font-weight: 600;
  font-size: 1.8rem;
}

.description {
  flex-grow: 1;
  line-height: 1.6;
  color: #606266;
  max-height: 80px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  margin-bottom: 10px;
}

.info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.info-item {
  display: flex;
  align-items: center;
  color: #606266;
}

.info-item .el-icon {
  margin-right: 8px;
  color: #409eff;
}

.chart-card, .comments-card {
  margin-bottom: 20px;
  height: 350px;
  border-radius: 8px;
  transition: all 0.3s ease;
  border: none;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.05);
  overflow: hidden;
}

.chart-card:hover, .comments-card:hover {
  box-shadow: 0 4px 16px 0 rgba(0, 0, 0, 0.1);
}

.comments-card {
  height: auto;
}

.chart-container {
  height: 180px;
}

.keyword-tag {
  margin: 3px;
}

.keywords-list {
  padding: 0 10px;
  margin: 5px 0;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  max-height: 70px;
  overflow-y: auto;
}

/* 用户关注点直接展示样式 */
.focus-points-direct {
  padding: 0 5px;
  height: 290px;
  overflow-y: auto;
  margin-top: 5px;
}

.focus-point-item {
  background: #f9f9f9;
  border-radius: 6px;
  margin-bottom: 10px;
  padding: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
  transition: all 0.2s ease;
}

.focus-point-item:hover {
  box-shadow: 0 3px 8px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.focus-point-header {
  display: flex;
  align-items: center;
  margin-bottom: 10px;
  flex-wrap: wrap;
}

.focus-category-badge {
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 12px;
  font-weight: 500;
  color: white;
  margin-right: 8px;
}

.category-primary {
  background-color: #409eff;
}

.category-success {
  background-color: #67c23a;
}

.category-warning {
  background-color: #e6a23c;
}

.category-danger {
  background-color: #f56c6c;
}

.category-info {
  background-color: #909399;
}

.focus-item-name {
  font-weight: 600;
  font-size: 14px;
  margin-right: 10px;
  flex: 1;
}

.focus-item-score {
  width: 80px;
}

.focus-score-progress {
  margin: 0;
}

.focus-entities {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-top: 8px;
}

.focus-alternative {
  height: 290px;
  padding: 15px;
  overflow-y: auto;
}

.focus-alt-item {
  margin-bottom: 15px;
}

.focus-alt-name {
  margin-bottom: 5px;
  font-weight: 500;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  color: #303133;
  font-weight: 600;
}

.topics-container {
  height: 280px;
  overflow-y: auto;
  padding: 0 10px;
}

.topic-item {
  margin-bottom: 15px;
  padding: 12px;
  background: #f9f9f9;
  border-radius: 8px;
}

.topic-name {
  margin-bottom: 10px;
}

.topic-keywords {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.topic-keyword {
  margin-bottom: 4px;
  border-radius: 4px;
}

.keyword-weight {
  font-size: 10px;
  opacity: 0.8;
}

.tips-tabs-container {
  height: 280px;
}

.tips-list {
  padding: 5px;
  max-height: 270px;
  overflow-y: auto;
}

.tips-container {
  height: 280px;
  overflow-y: auto;
  padding: 10px;
}

.tip-item {
  display: flex;
  align-items: flex-start;
  margin-bottom: 16px;
  line-height: 1.5;
  padding: 10px;
  background: #f9f9f9;
  border-radius: 8px;
  border-left: 3px solid #67c23a;
}

.tip-item-detailed {
  background: #f9f9f9;
  padding: 10px;
  margin-bottom: 10px;
  border-radius: 6px;
  border-left: 3px solid #67c23a;
}

.tip-content {
  display: flex;
  align-items: flex-start;
  margin-bottom: 5px;
}

.tip-score {
  text-align: right;
  font-size: 12px;
  color: #909399;
}

.tip-icon {
  margin-right: 8px;
  color: #67c23a;
  flex-shrink: 0;
  margin-top: 3px;
}

.comments-container {
  padding: 0;
}

.comments-list {
  display: flex;
  flex-direction: column;
  gap: 15px;
  padding: 10px;
  max-height: 300px;
  overflow-y: auto;
}

.comment-item {
  padding: 15px;
  border-radius: 8px;
  position: relative;
}

.comment-item.positive {
  background: rgba(103, 194, 58, 0.1);
  border-left: 4px solid #67c23a;
}

.comment-item.negative {
  background: rgba(245, 108, 108, 0.1);
  border-left: 4px solid #f56c6c;
}

.comment-content {
  line-height: 1.6;
  margin-bottom: 8px;
  color: #303133;
}

.comment-icon {
  vertical-align: middle;
  margin-right: 8px;
}

.comment-item.positive .comment-icon {
  color: #67c23a;
}

.comment-item.negative .comment-icon {
  color: #f56c6c;
}

.comment-score {
  text-align: right;
  font-size: 12px;
  color: #909399;
}

.action-area {
  margin-top: 20px;
  padding-bottom: 20px;
  display: flex;
  justify-content: center;
  gap: 20px;
}

.mt-20 {
  margin-top: 20px;
}

.hotspot-detail-dialog :deep(.el-dialog) {
  max-width: 1200px;
  margin: 0 auto;
  height: 85vh;
  max-height: 800px;
}

.hotspot-detail-dialog :deep(.el-dialog__body) {
  padding: 0;
}

/* 针对el-tabs的样式调整 */
.tips-tabs-container :deep(.el-tabs__header) {
  margin-right: 10px;
}

.tips-tabs-container :deep(.el-tabs__item) {
  height: auto;
  line-height: 1.5;
  padding: 8px 15px;
}

/* 针对情感分析图表的调整 */
.hotspot-detail-dialog :deep(.el-progress__text) {
  font-size: 12px !important;
}

.hotspot-detail-dialog :deep(.el-tabs__nav) {
  height: 100%;
}
</style>